<template>
    <div class="course-teach">
        <div class="teach-header">
            <div class="course-tabs">
                <li v-for="(item,index) in tabsList" :key="index" @click="handleTabsClick(item, index)" :class="currentIndex === index ? 'active' : ''">
                    {{ item.name }}
                </li>
            </div>
            <div class="help">
                <img src="../../../assets/icons/wenhao.png" alt="">
                <span>如何上课？</span>
            </div>
        </div>
        <div class="teach-content">
            <div class="class-box" v-if="isClass">
                <div class="class-item" v-for="item,index in classList" :key="index">
                  <div class="badge">推荐上课</div>
                    <div class="class-img">
                        <img :src="item.pic" alt="">
                        <span>{{ item.class_name }}</span>
                    </div>
                    <div class="class-info">
<!--                        <p class="biaoqian">推荐上课</p>-->
                        <h3>{{ item.plan_name }}</h3>
                        <span class="desc">{{ item.last_plan_name }}</span>
                        <div class="shangke" v-if="item.class_status === 0">
                            <img src="../../../assets/icons/bofang.png" alt="">
                            <span>开始上课</span>
                        </div>
                        <div class="shangke" v-if="item.class_status === 1" @click="classBegin(item)">
                            <img src="../../../assets/icons/status1.png" alt="">
                            <span>上课中</span>
                        </div>
                        <span>{{ item.prev }}</span>
                    </div>
                </div>
            </div>
            <div class="record-box" v-if="isRecord">
                <a-table :columns="columns" :data-source="tableData" :rowKey="(row, index) => {return index;}" bordered>
                    <a slot="name"></a>
                    <template slot="operation" slot-scope="text, record">
                        <div style="display: flex; align-items: center;">
                            <img style="width: 24px; height: 24px;" src="@/assets/icons/sosuo.png" alt="">
                            <a class="actionBtn" @click="() => correctHomework(record)">批改作业</a>
                        </div>
                    </template>
                </a-table>
            </div>
            <div class="empty" v-if="isClass && classList.length === 0">
                <Empty :emptyText="'当前您没有课程正在进行哦～'"></Empty>
            </div>
        </div>
    </div>
</template>
<script>
import Empty from '../../../components/empty.vue'
const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '课程名称',
    dataIndex: 'course_name',
    key: 'course_name',
  },
  {
    title: '课包名称',
    dataIndex: 'plan_name',
    key: 'plan_name',
  },
  {
    title: '班级',
    key: 'class_name',
    dataIndex: 'class_name',
  },
  {
    title: '老师',
    key: 'teacher_name',
    dataIndex: 'teacher_name',
  },
  {
    title: '上课时间',
    key: 'start_time',
    dataIndex: 'start_time',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    scopedSlots: { customRender: 'operation' },
  },
];

export default {
    name: 'CourseTeach',
    components: {
        Empty
    },
    data() {
        return {
            currentIndex: 0,
            isClass: true,
            isRecord: false,
            tabsList: [
                {
                    name: '上课',
                    type: 'class'
                },
                {
                    name: '上课记录',
                    type: 'classRecord'
                }
            ],
            classList: [],
            tableData: [],
            columns,
        }
    },
    mounted() {
        this.getStudentClassList();
        this.getStudentLog();
    },
    methods: {
        handleTabsClick(item, index) {
            this.currentIndex = index;
            if (item.type === 'class') {
                this.isClass = true;
                this.isRecord = false;
                this.getStudentClassList();
            } else {
                this.isClass = false;
                this.isRecord = true;
                this.getStudentLog();
            }
        },
        async getStudentClassList() {
            const res = await this.$request.get('api/edu/student_class_list');
            console.log(res, 'res===');
            if (res.code == 1) {
                this.classList = res.data || [];
            }
        },
        async getStudentLog() {
            const res = await this.$request.get('api/edu/student_log?page_size=1000');
            if (res.code == 1) {
                this.tableData = res.data.data || [];
            }
        },
        classBegin(item) {
            this.$router.push('/teachPlay?course_id=' + item.id + '&plan_id=' + item.plan_id + '&class_id=' + item.banji_id + '&courseName=' + item.title + '&period=' + item.period);
        },
        correctHomework(val) {
            console.log(val, 'val===');
            this.$emit('correctHomework');
        }
    }
}
</script>
<style lang="less" scoped>
.course-teach{
    width: 100%;
    .teach-header{
        display: flex;
        justify-content: space-between;
        padding-bottom: 20px;
        border-bottom: 1px solid #E9E6F2;
        .course-tabs{
            display: flex;
            margin-bottom: 20px;
            cursor: pointer;
            li{
                list-style: none;
                width: 170px;
                height: 56px;
                background: #EDF5FF;
                border-radius: 8px;
                border: 1px solid #78A9FF;
                line-height: 56px;
                font-weight: 400;
                font-size: 17px;
                color: #0080FF;
                text-align: center;
                margin-right: 10px;
                &.active{
                    background: linear-gradient( 90deg, #3881F8 0%, #5EA3FE 100%);
                    color: #FFFFFF;
                }
            }
        }
        .help{
            display: flex;
            align-items: center;
            img{
                width: 14px;
                height: 14px;
                margin-right: 5px;
            }
            span{
                font-weight: 400;
                font-size: 14px;
                color: #212442;
            }
        }
    }
    .teach-content{
        margin-top: 20px;
        .class-box{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            .class-item{
                width: 526px;
                height: 205px;
                background: #FFFFFF;
                box-shadow: 0px 2px 13px 0px #E1E3EB;
                border-radius: 13px;
                border: 1px solid #FFFFFF;
                padding: 16px;
                display: flex;
                position: relative;
                .badge {
                  position: absolute;
                  right: 12px;
                  top: 12px;
                  line-height: 23px;
                  background: red;
                  border-radius: 4px;
                  font-weight: 400;
                  font-size: 13px;
                  color: #FFFFFF;
                  text-align: center;
                  padding: 1px 4px;
                }
                .class-img{
                    width: 230px;
                    height: 172px;
                    position: relative;
                    margin-right: 25px;
                    img{
                        width: 100%;
                        height: 100%;
                        border-radius: 12px;
                    }
                    span{
                        display: block;
                        padding: 5px 10px;
                        background: linear-gradient(90deg, #ff7c39 0%, #ffb85f 100%);
                        position: absolute;
                        left: 0;
                        top: 0;
                        border-radius: 12px 0 12px 0;
                        font-weight: 400;
                        font-size: 14px;
                        color: #FFFFFF;
                    }
                }
                .class-info{
                    text-align: left;
                    .biaoqian{
                        width: 65px;
                        height: 23px;
                        line-height: 23px;
                        background: #CDE6FF;
                        border-radius: 4px;
                        font-weight: 400;
                        font-size: 13px;
                        color: #317AF7;
                        text-align: center;
                    }
                    .shangke{
                        width: 110px;
                        height: 42px;
                        background: linear-gradient( 180deg, #FC7815 0%, #FF6952 100%);
                        border-radius: 6px;
                        display: flex;
                        justify-content: center;
                        line-height: 42px;
                        margin: 24px;
                        img{
                            width: 20px;
                            height: 20px;
                            margin-top: 11px;
                            margin-right: 6px;
                        }
                        span{
                            font-weight: 400;
                            font-size: 16px;
                            color: #FFFFFF;
                        }
                    }
                    h3{
                        font-weight: 500;
                        font-size: 20px;
                        color: #12192D;
                    }
                    span{
                        font-weight: 400;
                        font-size: 13px;
                        color: #787878;
                    }
                }
            }
        }
        .actionBtn{
            width: 94px;
            height: 32px;
            line-height: 32px;
            background: linear-gradient( 90deg, #3881F8 0%, #5EA3FE 100%);
            border-radius: 6px;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
            display: block;
            text-align: center;
            margin-left: 14px;
        }
    }
}
</style>